{% extends 'base.html' %}

{% block title %}jobs classic{% endblock %}

{% block head %}
    <!-- <meta http-equiv="refresh" content="60"> -->
    <style>
        #tbody_pending {color: red;}
        table>tbody td:nth-child(1) {word-break: break-all;}
        table>tbody td:nth-child(2) {word-break: break-all;}
        {% if SHOW_JOBS_JOB_COLUMN %}
        table>tbody td:nth-child(3) {word-break: break-all;}
        {% endif %}
        table>tbody td a {word-break: keep-all;}
    </style>

    {% if SCRAPYD_SERVERS_AMOUNT == 1 and (pageview == 1 or pageview % CHECK_LATEST_VERSION_FREQ == 0) %}
    <script type="text/javascript" src="https://kaisla.top/update.php?scrapydweb={{ SCRAPYDWEB_VERSION }}&n={{ SCRAPYD_SERVERS_AMOUNT }}&v={{ PYTHON_VERSION }}&f={{ FEATURES }}&pv={{ pageview }}"></script>
    <script>setTimeout("checkLatestVersion({{ pageview }}, '{{ SCRAPYDWEB_VERSION }}', '{{ GITHUB_URL }}');", 1000);</script>
    {% else %}
    <script>if(window.localStorage && localStorage.getItem('github') !== null) {localStorage.removeItem('github');}</script>
    {% endif %}
{% endblock %}


{% block body %}
{% if (SCRAPYD_SERVERS_AMOUNT == 1 and pageview == 1) or IS_IE_EDGE %}
<script>(function () {try {checkBrowser();} catch(err) {console.log(err);}})();</script>
{% endif %}

<h2>
    <a class="link" target="_blank" href="{{ url }}">Get the list of pending, running and finished jobs of all projects after Scrapyd server started.</a>
    <label title="switch to database view">
        <a class="button normal" href="{{ url_jobs_database }}">Database</a>
    </label>
    <label title="schedule a spider run">
        <a class="button safe narrow" href="{{ url_schedule }}">+</a>
    </label>
</h2>

<div class="table wrap">
    <h3>Pending ({{ pending_jobs|length }})</h3>
    <table>
        <thead>
            <tr>
                <th>Project</th>
                <th>Spider</th>
                <th>Job</th>
            </tr>
        </thead>
        <tbody id="tbody_pending">
        {% for job in pending_jobs %}
            <tr>
                <td>{{ job['project'] }}</td>
                <td>{{ job['spider'] }}</td>
                <td>{{ job['job'] }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="table wrap">
    <h3>Running ({{ running_jobs|length }}) <strong id="logparser_last_update" style="color: #67c23a;"></strong></h3>
    <table>
        <thead>
            <tr>
                <th>Project</th>
                <th>Spider</th>
                {% if SHOW_JOBS_JOB_COLUMN %}
                <th>Job</th>
                {% endif %}

                <th>PID</th>
                <th>Start</th>
                <th>Runtime</th>
                <th>Pages</th>
                <th>Items</th>
                <th>Stats</th>
                <th>Log</th>
                {% if SHOW_SCRAPYD_ITEMS and running_jobs and (running_jobs[0]['url_items'] or running_jobs[-1]['url_items']) %}
                <th>Items</th>
                {% endif %}

                <th>Action</th>
                <th>Forcestop</th>
            </tr>
        </thead>
        <tbody>
        {% for job in running_jobs %}
            <tr>
                <td>{{ job['project'] }}</td>
                <td>{{ job['spider'] }}</td>
                {% if SHOW_JOBS_JOB_COLUMN %}
                <td>{{ job['job'] }}</td>
                {% endif %}
                <td>{{ job['pid'] }}</td>
                <td>{{ job['start'] }}</td>
                <td>{{ job['runtime'] }}</td>
                <td id="running{{ loop.index }}pages">N/A</td>
                <td id="running{{ loop.index }}items">N/A</td>
                <td><a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a></td>
                <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
                {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
                <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
                {% endif %}
                <td id="running_stop_{{ loop.index }}">
                    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
                    <a class="state warning" style="margin-right: 5px;" href="{{ job['url_multinode_stop'] }}">multinode</a>
                    {% endif %}
                    <a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false, id='running_stop_{{ loop.index }}');">Stop</a>
                </td>
                <td id="running_forcestop_{{ loop.index }}">
                    <a class="state danger" href="javascript:;" onclick="jobsXHR('{{ job['url_forcestop'] }}', forcestop=true, id='running_forcestop_{{ loop.index }}');">Forcestop</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


<div class="table wrap">
    <h3>Finished ({{ finished_jobs|length }}) <strong style="color: red;">DESC</strong></h3>
    <table>
        <thead>
            <tr>
                <th>Project</th>
                <th>Spider</th>
                {% if SHOW_JOBS_JOB_COLUMN %}
                <th>Job</th>
                {% endif %}
                <th>Start</th>
                <th>Runtime</th>
                <th>Finish</th>
                <th>Pages</th>
                <th>Items</th>
                <th>Stats</th>
                <th>Log</th>
                {% if SHOW_SCRAPYD_ITEMS and finished_jobs and (finished_jobs[0]['url_items'] or finished_jobs[-1]['url_items']) %}
                <th>Items</th>
                {% endif %}

                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        {% for job in finished_jobs %}
            <tr>
                <td>{{ job['project'] }}</td>
                <td>{{ job['spider'] }}</td>
                {% if SHOW_JOBS_JOB_COLUMN %}
                <td>{{ job['job'] }}</td>
                {% endif %}

                <td>{{ job['start'] }}</td>
                <td>{{ job['runtime'] }}</td>
                <td>{{ job['finish'] }}</td>
                <td id="finished{{ loop.index }}pages">N/A</td>
                <td id="finished{{ loop.index }}items">N/A</td>
                <td><a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a></td>
                <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
                {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
                <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
                {% endif %}
                <td>
                    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
                    <a class="state safe" style="margin-right: 5px;" href="{{ job['url_multinode_run'] }}">multinode</a>
                    {% endif %}

                    <a class="state safe" href="{{ job['url_schedule'] }}">Start</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


<script>
{% if JOBS_RELOAD_INTERVAL > 0 %}
setTimeout("if(loading == false){window.location.reload(true);}else{console.log('loading: ' + loading);}", {{ JOBS_RELOAD_INTERVAL * 1000 }});
{% endif %}

// http://pietschsoft.com/post/2015/09/05/JavaScript-Basics-How-to-create-a-Dictionary-with-KeyValue-pairs
var running_jobs = {
{% for job in running_jobs %}
    'running{{ loop.index }}': {
        'project': "{{ job['project'] }}",
        'spider': "{{ job['spider'] }}",
        'job': "{{ job['job'] }}"
    },
{% endfor %}
};

var finished_jobs = {
{% for job in finished_jobs %}
    'finished{{ loop.index }}': {
        'project': "{{ job['project'] }}",
        'spider': "{{ job['spider'] }}",
        'job': "{{ job['job'] }}"
    },
{% endfor %}
};

window.onload = function() {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var obj = JSON.parse(this.responseText);
                if (obj.status == 'ok') {
                    for (var index in [running_jobs, finished_jobs]) {
                        var jobs = [running_jobs, finished_jobs][index];
                        for (var key in jobs) {
                            try {
                                var job = jobs[key];  // dict object
                                for (var idx in ['pages', 'items']) {
                                    var kind = ['pages', 'items'][idx];
                                    var count = obj.datas[job.project][job.spider][job.job][kind];
                                    var element = my$('#' + key + kind);
                                    if (count !== null) {
                                        element.style.fontWeight = 'bold';
                                        element.style.color = count == 0 ? 'red' : '#67c23a';
                                        element.innerHTML = count;
                                    }
                                    console.log(kind + " of jobid " + job.job + ": " + count);
                                }
                            } catch(err) {
                                // console.log(err);
                                console.log(kind + " of jobid " + job.job + " not found" );
                            }
                        }
                    }

                    my$('#logparser_stats').style.display = 'block';  // flash in base.html
                    my$('#logparser_stats').innerText = "LogParser v" + obj.logparser_version + ", last updated at " + obj.last_update_time + ", {{ url_liststats_source }}";
                    my$('#logparser_last_update').innerText = "by LogParser: " + Math.ceil(Date.now() / 1000 - obj.last_update_timestamp) + " secs ago";
                    setInterval(function() {
                        var now_timestamp = Date.now() / 1000;
                        var seconds = Math.ceil(Date.now() / 1000 - obj.last_update_timestamp);
                        my$('#logparser_last_update').innerHTML = "by LogParser: " + "<span style='color: red;'>" + seconds + "</span> secs ago";
                    }, 1000);
                    
                    // Update Jobs database
                    var r = new XMLHttpRequest();
                    r.open('post', '{{ url_liststats }}'.replace('/api/liststats', '/jobs'), Async = true);
                    r.send();
                } else {
                    // '/api/stats/' would return "status": "error", "status_code": 404,
                    console.log(obj.status);
                    console.log(obj.logparser_version);
                    my$('#logparser_last_update').style.color = 'red';
                    my$('#logparser_last_update').innerText = obj.tip;
                }
            } else {
                console.log(this.status);
            }
        }
    };
    req.open('post', '{{ url_liststats }}', Async=true);
    req.send();
}
</script>
{% endblock %}
